<div ng-init="isHoverOn=false;focusOnKeyword=false"
     ng-mouseenter="isHoverOn=true"
     ng-mouseleave="isHoverOn=false;!focusOnKeyword&&closeSuggestions()">
    <i class="fa fa-search"></i>
    <input placeholder="{{placeholder}}"
           title="{{placeholder}}"
           type="text"
           ng-model="keyword"
           ng-keyup="onKeyUp($event)"
           ng-blur="!isHoverOn && closeSuggestions();focusOnKeyword=false"
           ng-focus="searchSuggestions(keyword||'');focusOnKeyword=true"
           class="ng-pristine ng-valid">

    <div class="quick-search-suggestions"
         ng-if="suggestions.length>0">
        <ul>
            <li ng-repeat="sg in suggestions|limitTo:20 track by $index"
                ng-class="{hover:(suggestions._currentIndex||0) == $index}"
                ng-mouseover="suggestions._currentIndex = $index"
                ng-click="clickSuggestion(sg, true);closeSuggestions();">
                <span ng-bind-html="highlightText(sg.text, keyword)"></span>
                <i ng-mouseenter="isMouseInSGType=true"
                   ng-mouseleave="isMouseInSGType=false"
                   ng-click="isRemoveShortcut(isMouseInSGType,sg)&&removeShortcut(sg.url);$event.stopPropagation()"
                   ng-class="{removeShortcut:isRemoveShortcut(isMouseInSGType,sg)}">
                    {{isRemoveShortcut(isMouseInSGType,sg)?'取消收藏':suggestionType(sg)}}
                </i>
            </li>
        </ul>
    </div>
</div>